<div class="form-inline">
  <button class="btn btn-default" (click)="addClientModal.show()">添加客户</button>
  <div class="pull-right">
    <input type="text" class="form-control" [(ngModel)]="searchData" name="searchData" placeholder="请输入手机号">
    <button class="btn btn-default" (click)="search()">检索</button>
    <button class="btn btn-default" (click)="reset()">重置</button>
  </div>
</div>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>用户名</th>
        <th>昵称</th>
        <th>手机号</th>
        <th>会员等级</th>
        <th>性别</th>
        <th>用户状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of clientList">
        <td>{{item.name}}</td>
        <td>{{item.nick_name}}</td>
        <td>{{item.mobile}}</td>
        <td>{{item.level}}</td>
        <td>{{item.sex}}</td>
        <td>
          <span *ngIf="!!item.isLock">正常</span>
          <span *ngIf="!item.isLock">封锁</span>
        </td>
        <td>
          <a href="javascript:;" routerLink="client-detail/{{item.id}}">查看</a>
          <a href="javascript:;" (click)="changStatus(item.id,item.isLock)">更改状态</a>
          <a href="javascript:;" (click)="resetPsdDialog(item.id)">密码重置</a>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [(ngModel)]="currentPage" [itemsPerPage]="itemsPerPage" [maxSize]="5"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<!-- 增加客户弹窗 -->
<div bsModal #addClientModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建分组</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addClientModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addClientForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>用户名</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="name" #name="ngModel" [(ngModel)]="userName" required>
              <p [hidden]="name.pristine || name.valid" class="alert alert-danger">名称不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>密码</label>
            <div class="col-md-7">
              <input type="password" class="form-control" name="password" #password="ngModel" [(ngModel)]="psd" required>
              <p [hidden]="password.pristine || password.valid" class="alert alert-danger">请输入密码!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>确认密码</label>
            <div class="col-md-7">
              <input type="password" class="form-control" name="psdAgain" #psdAgain="ngModel" [(ngModel)]="password_again" required>
              <p [hidden]="psdAgain.pristine || psdAgain.valid" class="alert alert-danger">请输入密码!</p>
            </div>
          </div>
        </form>
      </div>
      <div class="model-footer text-center">
        <button type="submit" class="btn btn-default" (click)="addClientModal.hide()">取 消</button>
        <button type="button" class="btn btn-success" [disabled]="!addClientForm.form.valid" (click)="addClientSubmit()">确 定</button>
      </div>
    </div>
  </div>
</div>

<!-- 重置密码 -->
<div bsModal #resetPsdModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建分组</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="resetPsdModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #resetPsdForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>密码</label>
            <div class="col-md-7">
              <input type="password" class="form-control" name="password" #password="ngModel" [(ngModel)]="resetPsd" required>
              <p [hidden]="password.pristine || password.valid" class="alert alert-danger">请输入密码!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>确认密码</label>
            <div class="col-md-7">
              <input type="password" class="form-control" name="psdAgain" #psdAgain="ngModel" [(ngModel)]="resetPsdAgain" required>
              <p [hidden]="psdAgain.pristine || psdAgain.valid" class="alert alert-danger">请输入密码!</p>
            </div>
          </div>
        </form>
      </div>
      <div class="model-footer text-center">
        <button type="submit" class="btn btn-default" (click)="resetPsdModal.hide()">取 消</button>
        <button type="button" class="btn btn-success" [disabled]="!resetPsdForm.form.valid" (click)="resetPsdSubmit()">确 定</button>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
